<template>
	<view class="fun-flex-col page">
		
			<view class="fun-flex-col">
				<text class="fun-self-start text_3">Forgot your password?</text>
				<text class="fun-self-stretch font text_4 mt-12 mb-24">
					Please enter your user name below and we'll send a verification code to the email address you're
					tied to to verify your identity.
				</text>
			</view>
			
			<view class="fun-flex-col">
				<text class="font_2 text_5">Username</text>
				<view class="fun-flex-col fun-justify-start  text-wrapper fun-mt-8" :class="isFous ? 'active' : ''">
					<input class="font text_6" v-model='postData.username' placeholder="Enter your username" type='text' @focus="isFous = true"  @blur="isFous = false"/>
				</view>
			</view>
			
			<view class="fun-flex-col verify-wrap">
				<text class="font_2 text_5">Verification Code</text>
				<view class="fun-flex-row fun-justify-between verify fun-mt-8">
					<input class="font text_6" v-model='postData.captcha' placeholder="Enter the verification code" type="text"/>
					<image class="image_11 pos_2" :src="captchaImg" @click="getCaptcha"/>
				</view>
			</view>
			<view class="tips fun-flex-row fun-justify-between fun-items-center" v-if='isShowTips'>
				<image src="@/static/common/tishi.png"></image>
				<text>You have not linked an email address. Please contact the official email for assistance.</text>
			</view>
			<view class="text-wrapper_4" @click="next">Next</view>
	</view>
</template>

<script>
	import {parseTime} from "@/common/js/func.js"
	import md5 from '@/js_sdk/js-md5/src/md5.js';
	import {forgotpassword,getCaptcha} from "@/api/common.js"
	export default {
		components: {},
		props: {},
		data() {
			return {
				postData:{
					step:1,
					username:"",
					captcha_id:'',
					captcha:""	
				},
				key:"",
				email:"",
				isFous:false,
				isShowTips:false,
				captchaImg:""
			};
		},
		
		onLoad() {
			this.getCaptcha();
		},

		methods: {
			getCaptcha(){
				getCaptcha().then(res => {
					if(res.code == 0){
						this.captchaImg = this.COFIG?.staticUrl + res.data?.img;
						this.postData.captcha_id = res.data?.cptid;
					}
					else{
						this.postData.captcha = "";
						this.postData.captcha_id = "";
						this.UTILS.logStr(res.msg || "获取验证码失败")
					}
				})
			},
			
			next(){
				if(!this.postData.username){
					this.UTILS.logStr("Enter your username");
					return
				}
				if(!this.postData.captcha){
					this.UTILS.logStr("Enter the verification code");
					return
				}
				forgotpassword(this.postData).then(res => {
					if(res.code == 0){
						this.key = res?.data?.key;
						this.email = res?.data?.email;
						uni.navigateTo({
							url:'/pages/login/retrive?username='+ encodeURIComponent(this.qpostDatausername) + '&key=' + encodeURIComponent(this.key)
						})
					}
					else{
						this.getCaptcha()
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.ml-5 {
		margin-left: 10rpx;
	}

	.mt-24 {
		margin-top: 48rpx;
	}

	.mt-12 {
		margin-top: 24rpx;
	}
	
	.mb-24 {
		margin-bottom: 48rpx;
	}

	.mt-11 {
		margin-top: 22rpx;
	}

	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		padding: 48rpx 32rpx 100rpx 32rpx;

			.text_3 {
				color: #000000;
				font-size: 40rpx;
				font-family: SF Pro Display;
				font-weight: 700;
			}

			.font {
				font-size: 28rpx;
				font-family: SF Pro Display;
			}

			.text_4 {
				color: #000000;
			}

			.font_2 {
				font-size: 32rpx;
				font-family: SF Pro Display;
				letter-spacing: -0.32rpx;
				color: #3e3e3e;
			}

			.text-wrapper {
				background-color: #ffffff;
				border-bottom: solid 2rpx #1a7b99;
				.text_6 {
					height: 100%;
					padding: 24rpx;
					color: #121212;
				}
			}
			.verify-wrap{
				margin-top:32rpx;
				.verify{
					input{
						flex:1;
						padding: 20rpx 24rpx 20rpx 24rpx;
						border-bottom: 1px solid #D9D9D9;
					}
					.image_11 {
						background: rgba(26, 123, 153, 0.2);
						width: 200rpx;
						height: 80rpx;
					}
				}
			}
			.active{
				border: solid 2rpx #1a7b99;
			}

			.text_7 {
				color: #000000;
				font-size: 32rpx;
				font-family: SF Pro Display;
				font-weight: 700;
			}

			.text_8 {
				margin-top: 32rpx;
			}

			.text-wrapper_2 {
				padding: 20rpx 0;
				background-color: #ffffff;
				border-bottom: solid 2rpx #d9d9d9;

				.font_3 {
					width: 100%;
					font-size: 32rpx;
					font-family: SF Pro Display;
					letter-spacing: -0.32rpx;
					color: #121212;
				}
			}

			.view {
				margin-top: 16rpx;
			}

			.text_10 {
				margin-top: 16rpx;
			}

			.view_2 {
				margin-top: 16rpx;
			}

			.text_11 {
				margin-top: 16rpx;
			}

			.section_3 {
				margin-top: 16rpx;
				background-color: #ffffff;
				border-bottom: solid 2rpx #d9d9d9;
				.text-wrapper_3 {
					padding: 20rpx 0;
					background-color: #1a7b99;
					border-radius: 8rpx;
					width: 160rpx;
				}
				input{
					padding: 20rpx 24rpx 20rpx 0;
				}
				.font_3{
					width: 100%;
				}
			}

			.text_13 {
				margin-top: 24rpx;
				margin-bottom: 48rpx;
				color: #b0b0bf;
				font-size: 24rpx;
			}

			.text-wrapper_4 {
				padding: 24rpx 0 28rpx;
				background-color: #1a7b99;
				border-radius: 8rpx;
				font-size: 28rpx;
				font-weight: 700;
				color: #ffffff;
				text-align: center;
				margin-top: 16rpx;
			}

			.font_4 {
				font-size: 28rpx;
				font-weight: 700;
				color: #ffffff;
			}

			.font_5 {
				font-size: 24rpx;
				font-family: Roboto;

			}

			.text_15 {
				color: #b2b2b2;
			}

			.group_2 {
				.text_16 {
					color: #b2b2b2;
					font-size: 24rpx;
					font-family: Roboto;
				}

				.text_17 {
					padding-left: 4px;
					color: #175bae;
				}
			}
			
			.tips{
				margin: 16rpx 0;
				text{
					flex: 1;
					font-size: 24rpx;
					color: #B0B1BF;
					line-height: 28rpx;
				}
				image{
					width: 32rpx;
					height: 32rpx;
				}
			}
		
	}
</style>